<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>css3 (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
     var _typeTreeName = "goog";
     var _fileTreeName = "Source";
  </script>

  <script src="static/js/doc.js">
  </script>


  <meta charset="utf8">
</head>

<body onload="grokdoc.onLoad();">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
       <span class="fn">fx.css3</span>
</div>

<hr/>


  <h2>Classes</h2>
 <div class="fn-constructor">
        <a href="class_goog_fx_css3_Transition.html">
          goog.fx.css3.Transition</a><br/>
        <div class="class-details">A class to handle targeted CSS3 transition. This class
handles common features required for targeted CSS3 transition.

Browser that does not support CSS3 transition will still receive all
the events fired by the transition object, but will not have any transition
played. If the browser supports the final state as set in setFinalState
method, the element will ends in the final state.

Transitioning multiple properties with the same setting is possible
by setting Css3Property's property to 'all'. Performing multiple
transitions can be done via setting multiple initialStyle,
finalStyle and transitions. Css3Property's delay can be used to
delay one of the transition. Here is an example for a transition
that expands on the width and then followed by the height:

<pre class="lang-js prettyprint">
initialStyle: {width: 10px, height: 10px}
finalStyle: {width: 100px, height: 100px}
transitions: [
{property: width, duration: 1, timing: &amp;#39;ease-in&amp;#39;, delay: 0},
{property: height, duration: 1, timing: &amp;#39;ease-in&amp;#39;, delay: 1}
]
</pre></div>
 </div>
   
<br/>

  <div class="legend">
        <span class="key publickey"></span><span>Public</span>
        <span class="key protectedkey"></span><span>Protected</span>
        <span class="key privatekey"></span><span>Private</span>
  </div>









<div class="section">
  <table class="horiz-rule">


  </table>
</div>




  <h2>Global Functions</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.fx.css3.fade"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.css3.</span><span class="entryName">fade<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">duration</span>,&nbsp;<span class="arg">timing</span>,&nbsp;<span class="arg">startOpacity</span>,&nbsp;<span class="arg">endOpacity</span>)</span>
        </span>
        &#8658; <div class="fullType"><span class="type"><a href="class_goog_fx_css3_Transition.html">goog.fx.css3.Transition</a></span></div>
      </div>


     <div class="entryOverview">
       Creates a transition to fade the element.
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <div class="fullType">(<span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span><span>&nbsp;|&nbsp;</span><span class="type">null</span>)</div>
        <div class="entryOverview">The element to fade.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">duration</span>
        : <div class="fullType"><span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number">number</a></span></div>
        <div class="entryOverview">Duration in seconds.</div>
     </td>
   </tr>
     
   <tr class="even">
     <td>
        <span class="entryName">timing</span>
        : <div class="fullType"><span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>
        <div class="entryOverview">The CSS3 timing function.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">startOpacity</span>
        : <div class="fullType"><span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number">number</a></span></div>
        <div class="entryOverview">Starting opacity.</div>
     </td>
   </tr>
     
   <tr class="even">
     <td>
        <span class="entryName">endOpacity</span>
        : <div class="fullType"><span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number">number</a></span></div>
        <div class="entryOverview">Ending opacity.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<div class="fullType"><span class="type"><a href="class_goog_fx_css3_Transition.html">goog.fx.css3.Transition</a></span></div>&nbsp;
            The transition object.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_fx_css3_fx.js.source.html#line35">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.fx.css3.fadeIn"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.css3.</span><span class="entryName">fadeIn<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">duration</span>)</span>
        </span>
        &#8658; <div class="fullType"><span class="type"><a href="class_goog_fx_css3_Transition.html">goog.fx.css3.Transition</a></span></div>
      </div>


     <div class="entryOverview">
       Creates a transition to fade in the element.
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <div class="fullType">(<span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span><span>&nbsp;|&nbsp;</span><span class="type">null</span>)</div>
        <div class="entryOverview">The element to fade in.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">duration</span>
        : <div class="fullType"><span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number">number</a></span></div>
        <div class="entryOverview">Duration in seconds.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<div class="fullType"><span class="type"><a href="class_goog_fx_css3_Transition.html">goog.fx.css3.Transition</a></span></div>&nbsp;
            The transition object.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_fx_css3_fx.js.source.html#line49">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.fx.css3.fadeOut"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.css3.</span><span class="entryName">fadeOut<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">duration</span>)</span>
        </span>
        &#8658; <div class="fullType"><span class="type"><a href="class_goog_fx_css3_Transition.html">goog.fx.css3.Transition</a></span></div>
      </div>


     <div class="entryOverview">
       Creates a transition to fade out the element.
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <div class="fullType">(<span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span><span>&nbsp;|&nbsp;</span><span class="type">null</span>)</div>
        <div class="entryOverview">The element to fade out.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">duration</span>
        : <div class="fullType"><span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number">number</a></span></div>
        <div class="entryOverview">Duration in seconds.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<div class="fullType"><span class="type"><a href="class_goog_fx_css3_Transition.html">goog.fx.css3.Transition</a></span></div>&nbsp;
            The transition object.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_fx_css3_fx.js.source.html#line60">code &raquo;</a>
  </td>
     </tr>


  </table>
</div>



      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Package fx</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">Package Reference</h2>
            <div id="sideTypeIndex" rootPath="" current="fx.css3"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
